@layout("/common/_container.html"){
<style>
    .fr{
        float: right;
        margin-right: 5px;
    }
    td input{
        width: 100%
    }
    .form-ahead{
       overflow: hidden;
       margin-bottom: 5px;
    }
    .head-title-h{
        text-align: center;
        margin-bottom: 10px;
    }
    .RecYear-div{
        float:right
    }
    .form-group-block{
    padding: 5px;
    border: 1px solid #ccc
    }
    .addline{
        float:right;
        margin-bottom:10px;
    }
    .delline{
            float:right;
            margin-bottom:10px;
            margin-left:10px;
        }
    .img-formtip img{
       padding-left:30px;
    }
    .help-block{
    color:#a94442
}
th{
    text-align:center
}
li{
    list-style: none;
}
    </style>
<div class="row">
    <div class="col-sm-12">
        <div class="head-title-h">
            <h2>自建中水设施使用情况年报</h2>
        </div>

        <a href="#" class="btn btn-primary btn-sm delline">
            <span class="glyphicon glyphicon-minus">删除条目</span>
        </a>
        <a href="#" class="btn btn-primary btn-sm addline">
            <span class="glyphicon glyphicon-plus">增加条目</span>
        </a>
        <form class="myform" action="" id="form5">
            <!-- 表头 -->
            <div class="form-ahead">
                <div class="col-sm-4">
                    <label class="col-sm-12 col-form-label" for="UnitHead">填表单位名称（盖章）：</label>
                </div>
                <div class="col-sm-2 RecYear-div">
                    <label for="RecYear" class="col-sm-4 col-form-label" title="必填项"><i style="color:red">*</i>年份：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control  col-sm-2" name="RecYear" id="RecYear" title=""
                            placeholder="">
                    </div>
                </div>
            </div>
            <form class="" action="">
                <div class="form-group row form-group-block">
                    <div class="col-sm-12">
                        <!-- table1 -->
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col" title="有多套中水处理设施时每套设施的名称，只有一套时不用填写"><i style="color:red">*</i>项目名称</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>用水户名称 </th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>用水户编号</th>
                                    <th scope="col"></th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>工程状态</th>
                                    <th scope="col"></th>
                                    <th scope="col">年利用总量(立方米/年)</th>
                                   
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"title="必填项"><i style="color:red">*</i>中水用途</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"title="必填项"><i style="color:red">*</i>城市杂用水水质检测报告</th>
                                    <th scope="col"title="必填项"><i style="color:red">*</i>景观环境用水水质检测报告</th>
                                </tr>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col">在用</th>
                                    <th scope="col">未用</th>
                                    <th scope="col">停用</th>
                                    <th scope="col"></th>
                                    <th scope="col">冲厕</th>
                                    <th scope="col">绿化</th>
                                    <th scope="col">景观</th>
                                    <th scope="col">道路喷洒</th>
                                    <th scope="col">洗车</th>
                                    <th scope="col">工业</th>
                                    <th scope="col">其他</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                </tr>
                                <tr class="line-tr3">
                                </tr>
                            </thead>
                            <tbody class="tbody-aplus">
                                <br>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="UnitHead" title="必填项"><i style="color:red">*</i>单位负责人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="UnitHead" id="UnitHead" value="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Operater"  title="可在“个人资料”进行修改">填表人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="Operater" id="Operater" value="${Operater}" title="可在“个人资料”进行修改" placeholder=""
                            disabled="disabled">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Phone"  title="可在“个人资料”进行修改">联系电话：</label>
                    <div class="col-sm-8">
                        <input type="text" name="phone" id="Phone" value="${phone}" value="" title="可在“个人资料”进行修改"
                            placeholder="" disabled="disabled">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="ts">报出日期：</label>
                    <div class="col-sm-8">
                        <input type="text" name="ts" id="Ts" value="${Ts}" placeholder="" disabled="disabled">
                    </div>
                </div>
            </form>
            </br>
            </br>
            </br>
            </br>
            <button type="button" id="submit1" class="btn btn-info fr" data-toggle="modal" data-target="#myModal">全部提交</button>
            <button type="button" id="saveform" class="btn btn-primary fr">保存</button>
            <button type="button" id="exportform" class="btn btn-primary fr">导出</button>
            <button type="button" id="preview" class="btn btn-primary fr">预览</button>
            <a id='export_a' href=''></a>
    </div>
    <div>
        <ul>
            <li><strong>说明：</strong></li>
            <li>1.统计范围：各区自建中水设施单位。</li>
            <li>2.报送单位：中水单位及各区节水管理部门。</li>
            <li> 3.报送时间及方式：中水单位于每年1月30日前报送各区节水管理部门纸介质报表，各区节水管理部门汇总后于每年2月10日前一次性报送市节水																						
                办。</li>
                <li> 4.“项目名称”指有多套中水处理设施时每套设施的名称，只有一套时不用填写。</li>
                    <li>5.“用水户名称”及“用水户编号”指属于在供水企业备案的名称和用水编号。</li>
                        <li> 6.有某项用途的在相应用途单元格标注“√”。</li>
                        <li> 7.进行过水质检测的在相应单元格标注“√”,并填报相应的水质检测报告。</li>

        </ul>
        <br>
        <br>
        <ul>
            <li><strong>指标解释：</strong></li>
            <li>1.在用指正在运行的建筑中水工程；</li>
            <li>2.未用指自从兴建以后从未投入运行的建筑中水工程；</li>
            <li>3.取水用途分为工业、公共服务、城镇环境、城镇居民、农村居民、农村生态、农业。</li>
            <li>4.年利用总量指本年度利用的中水总量；</li>
            <li>5.城市杂用水水质检测报告、景观环境用水水质检测报告格式详见下表；</li>
        </ul>
        <br>
        <br>
            <div class="img-formtip">
        <img src="${ctxPath}/static/img/page5png.png">
        </div>

        <!-- 弹窗选择 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">请勾选你所要提交的页面</h4>
                    </div>
                    <div class="modal-body checkpage">
                        <div>
                            <label class="checkbox-inline">
                                <input style="margin-top:0" type="checkbox" id="checkpage1" value="1"><span>用水单位基本信息</span>
                            </label>
                            <label class="checkbox-inline">
                                <input style="margin-top:0" type="checkbox" id="checkpage2" value="2"><span>节约用水年报</span>
                            </label>
                            <label class="checkbox-inline">
                                <input style="margin-top:0" type="checkbox" id="checkpage3" value="3"> <span>工业企业用水情况年报表</span>
                            </label>
                            <label class="checkbox-inline">
                                <input style="margin-top:0" type="checkbox" id="checkpage4" value="4"><span>技改年报</span> 
                            </label>
                            <label class="checkbox-inline">
                                <input style="margin-top:0" type="checkbox" id="checkpage5" value="5"><span>中水</span> 
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default closeDialog" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit_confirm">确认提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    </div>
</div>
<script>
      $(document).keydown(function(event){
          switch(event.keyCode){
             case 13:return false; 
             }
      });
    $("#form5").bootstrapValidator({
        live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'], //排除无需验证的控件，比如被禁用的或者被隐藏的
        fields: {
            RecYear: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    regexp: { //正则验证
                        regexp: /^\d{4}$/,
                        message: '请输入四位纯数字'
                    }
                }
            },
            Reporter: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
            UnitHead: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
        }
    })
    //全部提交请求
    $(document).on("click",".checkpage input",function(){
        $(this).attr("checked",true)
    })

    $(document).on("click",".submit_confirm",function(){
        pageArr=[]
        console.log($(".checkpage input"))
        $(".checkpage input").each(function(index){
            if($(this).is(":checked")){
                pageArr.push($(this).val())
            }
        })
        console.log(pageArr)
        var ajax = new $ax(Feng.ctxPath + '/halfusewater/updateCommit', function (data) {
            // Feng.success("请求成功!");
            $(".closeDialog")[0].click()
            console.log(data)
            console.log(data.length)
                if (data.code == 200) {
                    Feng.success(data.msg);
                } else {
                    Feng.error(data.msg);
                }
        }, function (data) {
            Feng.error("全部提交失败!");
        }); 
        ajax.set("halfusewaterId",JSON.stringify(pageArr));
        ajax.start();
    })

    var linetr3Arr = ["甲", "乙", "丙",
        "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"
    ]
    var linetrName = ["PrjName", "WaterUnitName", "WaterUnitId", "DeviceStatus", "", "", "WaterVolumeYear",
        "FlushToilet",
        "Green", "Landscape",
        "RoadSpray", "CarWash",
        "Industry", "OtherUse", "UsualDetected", "LandscapeDetected",
    ]
    var linetr3Str = ""
    var linetr3Input = ""
    for (var i in linetr3Arr) {
        linetr3Str = linetr3Str + '<th scope="col">' + linetr3Arr[i] + '</th>'
        linetr3Input = linetr3Input + '<td><input name="' + linetrName[i] + '"></td>'
    }
    $(".line-tr3").append(linetr3Str) //首行序号

    //saveform
    //定义serializeObject方法，序列化表单
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
    //exportform 导出
    $(document).on("click", "#exportform", function () {
        $("#export_a").attr("href", Feng.ctxPath + '/midwater/dlExcell')
        $("#export_a")[0].click()
    })
    //input checkbox勾选之后为checked
    $(document).on("click", "input[type=checkbox]", function () {
       $(this).attr("checked","checked")
    })
    //点击提交
    $("#saveform").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("#form5").bootstrapValidator('validate'); //提交验证
        if ($("#form5").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
            //checkbox
            var checkboxArr=["FlushToilet","Green","Landscape","RoadSpray","CarWash","Industry","OtherUse","UsualDetected","LandscapeDetected",]
            for(i=0;i<checkboxArr.length;i++)
                {
                eval("var checkboxArr"+i+" = [];");
                }
            $("input[name=FlushToilet]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr0.push(1)
                }else{
                    checkboxArr0.push(undefined)
                }
            })
            $("input[name=Green]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr1.push(1)
                }else{
                    checkboxArr1.push(undefined)
                }
            })
            $("input[name=Landscape]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr2.push(1)
                }else{
                    checkboxArr2.push(undefined)
                }
            })
            $("input[name=RoadSpray]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr3.push(1)
                }else{
                    checkboxArr3.push(undefined)
                }
            })
            $("input[name=CarWash]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr4.push(1)
                }else{
                    checkboxArr4.push(undefined)
                }
            })
            $("input[name=Industry]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr5.push(1)
                }else{
                    checkboxArr5.push(undefined)
                }
            })
            $("input[name=OtherUse]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr6.push(1)
                }else{
                    checkboxArr6.push(undefined)
                }
            })
            $("input[name=UsualDetected]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr7.push(1)
                }else{
                    checkboxArr7.push(undefined)
                }
            })
            $("input[name=LandscapeDetected]").each(function(index){
                if($(this).attr("checked")=="checked"){
                    checkboxArr8.push(1)
                }else{
                    checkboxArr8.push(undefined)
                }
            })
            //选中的checkbox的val为1
            $(".totalcount input[type='checkbox']").each(function () {
                if ($(this).is(':checked') == true) {
                    $(this).attr("value", "1")
                } else {
                    $(this).attr("value", "0")
                }
            })
            
            var form = $(".myform").serializeObject();
            if(countline != 1) {
                form["FlushToilet"]=checkboxArr0
                form["Green"]=checkboxArr1
                form["Landscape"]=checkboxArr2
                form["RoadSpray"]=checkboxArr3
                form["CarWash"]=checkboxArr4
                form["Industry"]=checkboxArr5
                form["OtherUse"]=checkboxArr6
                form["UsualDetected"]=checkboxArr7
                form["LandscapeDetected"]=checkboxArr8
            }
            console.log(form)

            var formcorrect = []

            for (var i = 0; i < countline; i++) {
                if (countline == 1) {
                    formcorrect.push({
                        PrjName: form["PrjName"],
                        WaterUnitName: form["WaterUnitName"],
                        WaterUnitId: form["WaterUnitId"],
                        DeviceStatus: form["DeviceStatus0"],
                        WaterVolumeYear: form["WaterVolumeYear"],
                        FlushToilet: form["FlushToilet"],
                        Green: form["Green"],
                        Landscape: form["Landscape"],
                        RoadSpray: form["RoadSpray"],
                        CarWash: form["CarWash"],
                        Industry: form["Industry"],
                        OtherUse: form["OtherUse"],
                        UsualDetected: form["UsualDetected"],
                        LandscapeDetected: form["LandscapeDetected"],
                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                    })
                } else {
    
                    if(typeof(form["FlushToilet"])=="undefined"){
                       var FlushToilet=form["FlushToilet"]
                    }else{
                        var FlushToilet=form["FlushToilet"][i]
                    }
                    if(typeof(form["Green"])=="undefined"){//没有值
                       var Green=form["Green"]
                    }else{
                        var Green=form["Green"][i]
                    }
                    if(typeof(form["Landscape"])=="undefined"){
                       var Landscape=form["Landscape"]
                    }else{
                        var Landscape=form["Landscape"][i]
                    }
                    if(typeof(form["RoadSpray"])=="undefined"){
                       var RoadSpray=form["RoadSpray"]
                    }else{
                        var RoadSpray=form["RoadSpray"][i]
                    }
                    if(typeof(form["CarWash"])=="undefined"){
                       var CarWash=form["CarWash"]
                    }else{
                        var CarWash=form["CarWash"][i]
                    }
                    if(typeof(form["Industry"])=="undefined"){
                       var Industry=form["Industry"]
                    }else{
                        var Industry=form["Industry"][i]
                    }
                    if(typeof(form["OtherUse"])=="undefined"){
                       var OtherUse=form["OtherUse"]
                    }else{
                        var OtherUse=form["OtherUse"][i]
                    }
                    if(typeof(form["UsualDetected"])=="undefined"){
                       var UsualDetected=form["UsualDetected"]
                    }else{
                        var UsualDetected=form["UsualDetected"][i]
                    }
                    if(typeof(form["LandscapeDetected"])=="undefined"){
                       var LandscapeDetected=form["LandscapeDetected"]
                    }else{
                        var LandscapeDetected=form["LandscapeDetected"][i]
                    }

                    var DeviceStatusArr=[]
                    for(var j=0;j<countline;j++){
                       j*=1;
                        DeviceStatusArr.push(form["DeviceStatus"+j])
                         console.log(DeviceStatusArr)
                    }
            
                    formcorrect.push({
                        PrjName: form["PrjName"][i],
                        WaterUnitName: form["WaterUnitName"][i],
                        WaterUnitId: form["WaterUnitId"][i],
                        DeviceStatus: DeviceStatusArr[i],
                        WaterVolumeYear: form["WaterVolumeYear"][i],

                        //checkbox
                        FlushToilet: FlushToilet,
                        Green: Green,
                        Landscape: Landscape,
                        RoadSpray: RoadSpray,
                        CarWash: CarWash,
                        Industry: Industry,
                        OtherUse: OtherUse,
                        UsualDetected: UsualDetected,
                        LandscapeDetected:LandscapeDetected,

                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                    })
                }

            }
            console.log(formcorrect)
            var ajax = new $ax(Feng.ctxPath + '/midwater/pushMsg', function (data) {
                
                    if (data.code == 200) {
                        Feng.success(data.msg);
                    } else {
                        Feng.error(data.msg);
                    }
            }, function (data) {
                Feng.error("请求失败!");
            });
            ajax.set("json", JSON.stringify(formcorrect));
            ajax.start();
        }  else{
            //解决table校验提示重复问题
            Feng.error("表单有漏填或填写格式错误");//获取验证结果，失败
        }
    });
    $(document).on("click", "#preview", function () {
        window.open(Feng.ctxPath + '/midwater/showPDF', "_blank",
            "top=200,left=200,height=600,width=800,status=yes,toolbar=1,menubar=no,location=no,scrollbars=yes"
        );

    })
</script>
<script src="${ctxPath}/static/modular/fsjs/midwater/midwater.js"></script>
<script>
    //返回的数据data
    var dataLength
    var daterecive
    var ajax = new $ax(Feng.ctxPath + '/midwater/getTemp', function (data) {
        console.log(data)
        dataLength = data.length
        daterecive = data
    }, function (data) {
        // Feng.error("请求失败!" + data.responseJSON.message + "!");
    });
    ajax.start();

    //addline 增加条目
    if (typeof (dataLength) == "undefined") {
        dataLength = 1
    }
    var countline = dataLength

    appendline() //init 初始化显示一条
    function appendline() {
        for (var i = 0; i < countline; i++) {
            $(".tbody-aplus").append('<tr class="totalcount" index="' + i + '"></tr>')
        }
        $(".totalcount").append(linetr3Input)
    }
    $(".addline").click(function () {
        //已勾选的radio
        radioCheckArr=[]
            for(var i=0;i<countline;i++){
                i*=1
                radioCheckArr.push($("input[type='radio'][checked='checked']").val())
                console.log(radioCheckArr)
       }

        countline++;
        $(".tbody-aplus").append('<tr class="totalcount" index="' + countline + '"></tr>')
        $(".totalcount:last").append(linetr3Input)

        
   
        dropdownList(1)
    })
    //delline 删除条目
    $(".delline").click(function () {
        countline--;
        $(".totalcount:last").remove();
        console.log(countline)
    })
    //修改input框类型
    dropdownList() //init
    function dropdownList(index) {
            $(".totalcount").each(function (line) {
            $($(this).find("input")[3]).each(function () { //工程状态
                $(this).parent("td").html('<input name="DeviceStatus' + line +
                    '" type="radio" value="1">')
            })
            $($(this).find("input")[4]).each(function () {
                $(this).parent("td").html('<input name="DeviceStatus' + line +
                    '" type="radio" value="2">')
            })
            $($(this).find("input")[5]).each(function () {
                $(this).parent("td").html('<input name="DeviceStatus' + line +
                    '" type="radio" value="3">')
            })

            for (var i = 7; i <= 15; i++) { //初始input 为未勾选,false，值为0
                $($(this).find("input")[i]).attr({
                    "type": "checkbox",
                    "value": "0"
                })
            }
            })

            //增加操作后的渲染
            if(index==1){
            for(var i in radioCheckArr){
                i*=1
                $("input[name=DeviceStatus"+i+"]").each(function (index, el) {
                if ((index + 1) == daterecive[i].deviceStatus) {
                    $(this).attr("checked", "checked")
                }
                })
            }}

        
    }

    //接受数据de渲染
    initRecive();

    function initRecive() {
        if (typeof (daterecive) == "undefined") {

        } else {
            var returnObjArr = []
            for (var i in daterecive[0]) {
                returnObjArr.push(i) //首字母是小写
            }
            console.log($(".totalcount"))
            for (var i in returnObjArr) {
                var currentObj = returnObjArr[i]
                //首字母小写转大写
                currentObj_A = currentObj.replace(currentObj[0], currentObj[0].toUpperCase());
                for (var j in daterecive) { //显示值
                    $($('input[name=' + currentObj_A + ']')[j]).attr('value', daterecive[j][currentObj]);
                }

            }
            //判断显示值 checkbox
            $("input[type=checkbox][value=0]").each(function () {
                $(this).attr("checked", false)
            })
            $("input[type=checkbox][value=1]").each(function () {
                $(this).attr("checked", true)
            })
            //判断显示 radio
            var deviceStatus = daterecive[0].deviceStatus
            $("input[name=DeviceStatus0]").each(function (index, el) {
                if ((index + 1) == deviceStatus) {
                    $(this).attr("checked", "checked")
                }
            })

            for(var i in daterecive){
                i*=1
                $("input[name=DeviceStatus"+i+"]").each(function (index, el) {
                if ((index + 1) == daterecive[i].deviceStatus) {
                    $(this).attr("checked", "checked")
                }
            })
            }
            
        }

    }
</script>
@}